<template>
  <el-container class="message">
    <el-header class="el-header">
      <h2>留言板</h2>
    </el-header>
    <mark-down-dialog :visible.sync="dialogVisible"
                      title="markdown 预览" :mdContent="msg.content"></mark-down-dialog>
    <el-main>
      <el-input v-model="msg.title" placeholder="请输入标题"></el-input>
      <el-input type="textarea" :rows="15" placeholder="请输入内容，支持使用 markdown 语法"
                v-model="msg.content" class="txt-area"></el-input>
      <el-button-group class="btnGroup">
        <el-button round @click="submitMsg()">提交</el-button>
        <el-button round @click="dialogVisible = true">预览</el-button>
      </el-button-group>
      <el-switch
        style="margin-left: 15px"
        v-model="pub"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="公开评论"
        inactive-text="私有评论">
      </el-switch>
      <el-card class="box-card msg-card" v-for="msg in msgs" :key="msg.id" shadow="hover">
        <div slot="header" class="clearfix msg-header">
          <h3>{{msg.title}}</h3>
          <el-tag><i class="el-icon-date"></i> {{msg.created_at|dateFormat('YYYY-MM-DD hh:mm:ss')}}</el-tag>
          <el-tag type="success"><i class="el-icon-edit"></i> {{msg.author}}</el-tag>
        </div>
        <div class="text item">
          <div v-html="msg.content" class="markdown-body"></div>
        </div>
      </el-card>
      <el-pagination v-if="total>0" background
        layout="prev, pager, next"
        @current-change="listPage"
        :total="total">
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import {MsgService, LocalService} from '@/service/api'
import MarkDownDialog from '@/components/common/MarkDownDialog'
import marked from 'marked'

export default {
  components: {
    'mark-down-dialog': MarkDownDialog
  },
  data () {
    return {
      msg: {
        title: null,
        content: null
      },
      mdContent: null,
      pub: true,
      dialogVisible: false,
      msgs: [],
      total: 0
    }
  },
  beforeDestroy: function () {
    LocalService.SaveTmpMsg(this.msg.title, this.msg.content)
  },
  mounted: function () {
    let msg = LocalService.GetTmpMsg()
    this.msg.title = msg.title === 'null' || msg.title === 'undefined' ? null : msg.title
    this.msg.content = msg.content === 'null' || msg.content === 'undefined' ? null : msg.content
    this.listPage(1)
  },
  methods: {
    submitMsg: function () {
      MsgService.create(this.pub, this.msg.title, this.msg.content)
        .then(res => {
          if (res === 'success') {
            this.$message.success('提交成功')
            this.listPage(1)
          }
        })
    },
    listPage: function (val) {
      MsgService.page(val, 5)
        .then(res => {
          this.msgs = res.msgs
          for (let msg of this.msgs) {
            msg.content = marked(msg.content)
          }
          this.total = res.total
        })
    }
  }
}
</script>

<style scoped>
  .btnGroup{
    height: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .txt-area {
    margin-top: 20px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .msg-card {
    margin-bottom: 20px;
  }

  .msg-header {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
  }
</style>
